화면의 동작과 업무 구현을 위한 공통 라이브러리

HandStack 프론트엔드 개발의 핵심

QCN

학습 목표

  • HandStack의 화면 개발에 사용되는 핵심 syn.js 공통 라이브러리에 대해 알아봅니다.
  • syn.js 라이브러리는 외부 종속성이 없는 독립적인 구조로, 가볍고 빠른 웹 애플리케이션 개발을 지원합니다.
  • 주요 기능들을 살펴보고 어떻게 활용할 수 있는지 알아봅니다.
QCN

syn.js: 유틸리티 라이브러리 (1)

  • syn.js는 HandStack의 프론트엔드 개발에 필요한 다양한 유틸리티 함수를 모아놓은 경량 라이브러리입니다.
약어 파일명 설명
syn.$b syn.browser.js 브라우저 정보 확인 기능 제공
syn.$m syn.manipulation.js DOM (Document Object Model) 조작 기능 제공
syn.$d syn.dimension.js HTML Element 크기, 위치 제어 기능 제공
syn.$c syn.cryptography.js base64, sha256 및 암호화 기능 제공
syn.$k syn.keyboard.js 키보드 단축키 기능 제공
syn.$v syn.validation.js 유효성 검사 기능 제공
QCN

syn.js: 유틸리티 라이브러리 (2)

  • 화면 개발과 업무 로직 처리에 특화된 기능들을 제공합니다.
약어 파일명 설명
syn.$l syn.library.js 공통 라이브러리 기능 제공
syn.$w syn.webform.js 화면 개발 및 거래 업무 기능 제공
syn.$r syn.request.js http 요청 및 URL, Cookie 조작 기능 제공
syn.$n syn.network.js iframe 화면 간에 양방향 통신 기능을 제공
syn.$p syn.print.js PDF 문서를 이용한 인쇄 기능을 제공
QCN

기본 타입 확장 기능

  • syn.extension.js 파일은 자바스크립트의 기본 데이터 타입을 확장하여 개발 편의성을 높여줍니다.

  • 자주 사용하는 기능들을 간결하게 사용할 수 있습니다.

확장 객체 설명
$date 날짜 관련 포매팅 및 계산 기능 제공
$array 배열 조작 및 유틸리티 기능 제공
$string 문자열 조작 및 유틸리티 기능 제공
$number 숫자 포매팅 및 계산 기능 제공
$object 객체 조작 및 유틸리티 기능 제공
QCN

소스 위치와 번들링

  • syn.js 관련 모든 소스 코드는 아래 경로에서 확인할 수 있습니다.
  • HandStack은 빌드 시점에 이 소스들을 하나의 파일로 묶어(Bundling) 로딩 성능을 최적화합니다.
$(HANDSTACK_SRC)/1.WebHost/ack/wwwroot/assets/src
  • 소스를 직접 분석하고 수정하여 프로젝트에 필요한 기능을 추가하거나 변경할 수 있습니다.
QCN

핸즈온: syn.js 사용 현황 분석

  • handstack synusage CLI 도구를 사용하여 프로젝트 내에서 syn.js 함수들이 어떻게 사용되고 있는지 분석할 수 있습니다.

  • functions: syn.js 함수 사용 현황

  • uicontrols: syn.uicontrols.js 함수 사용 현황

%HANDSTACK_HOME%\app\cli\handstack synusage --directory="%HANDSTACK_HOME%\contracts\wwwroot\HDS" --value=functions
  • 참고 문서: syn.js 소개
  • 로컬 샘플: http://localhost:8421/sample/syn (로컬 서버 실행 후 확인)
QCN

요약 정리 및 Q&A

  • HandStack이 제공하는 공통 라이브러리는 개발의 기반이 되는 강력한 도구입니다.
  • 내부 동작 방식을 이해하고 직접 수정해보는 경험은 여러분을 더 나은 개발자로 성장시킬 것입니다.
  • 이제, 화면의 동작과 업무 구현을 위한 공통 라이브러리를 직접 커스터마이징 해보세요.
QCN